<template>
  <div class="wrap">
    <div class="title">商家后台管理系统</div>
    <div class="register">
      <div class="card">
        <div class="title log">注册</div>
        <el-form class="form" :model="form" :rules="rules" ref="form" label-width="">
          <el-form-item class="four" prop="userName" size="small">
            <el-input placeholder="账 号" v-model="form.userName"></el-input>
          </el-form-item>
          <el-form-item class="four" prop="userPassword" size="small">
            <el-input placeholder="密 码" type="password" v-model="form.userPassword"></el-input>
          </el-form-item>
          <el-form-item class="four" prop="surePassword" size="small">
            <el-input placeholder="确认密码" type="password" v-model="form.surePassword"></el-input>
          </el-form-item>
          <el-form-item class="four" prop="userMobile" size="small">
            <el-input placeholder="手机号" v-model="form.userMobile"></el-input>
          </el-form-item>
          <div class="ymas">
            <el-form-item prop="imageCode" size="small">
              <el-input placeholder="验证码" v-model="form.imageCode"></el-input>
            </el-form-item>
            <div class="getimg" @click = "init">
              <img :src="form.imag" alt=""/>
            </div>
          </div>
          <div class="mocode">
            <el-form-item class="phonecode" prop="mobileCode" size="small">
              <el-input placeholder="手机验证码" v-model="form.mobileCode"></el-input>
            </el-form-item>
            <div><el-button class="setup" @click="sendcode" type="primary" size="small" :disabled="disabled">{{codeText}}</el-button></div>
          </div>
          <div class="btns">
            <el-button class="setup" @click="gologin" type="primary" size="small">返回登录</el-button>
            <el-button class="setup" type="primary" @click="sub" size="small">确认提交</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'register',
  data () {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.userPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      codeText: '发送验证码',
      disabled: false,
      form: {
        userName: '',
        userPassword: '',
        surePassword: '',
        imageCode: '',
        userMobile: '',
        imag: '',
        findPwd: ''
      },
      rules: {
        userName: [
          { required: true, message: '请填写账号！', trigger: 'blur' },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,30}$/,
            message: '6-30位英文或英文+数字',
            trigger: 'blur'
          }
        ],
        userPassword: [
          { required: true, message: '请填写密码！', trigger: 'blur' },
          { pattern: /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,32}$/, message: '密码8-32位，必须同时大小写+数字组合', trigger: 'blur' }
        ],
        surePassword: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        userMobile: [
          { required: true, message: '请填写手机号！', trigger: 'blur' },
          { pattern: /^1[345678]\d{9}$/, message: '手机号格式不正确！', trigger: 'blur' }
        ],
        imageCode: [
          { required: true, message: '请填写验证码！', trigger: 'blur' }
        ],
        mobileCode: [
          { required: true, message: '请填写手机验证码！', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.$tkAjax.get(`${this.$config.baseUrl}/user/merchantUser/captcha`).then(res => {
        this.form.imag = 'data:image/png;base64,' + res.data.content
      }).catch(err => {
        this.$message.warning(err.data.message)
      })
    },
    gologin () {
      this.$router.push('/login')
    },
    sendcode () {
      // let json = {
      //   // userId:
      // }
      this.$tkAjax.post(`${this.$config.baseUrl}/user/merchantUser/sendMobileCode`, {}, {
        params: {
          mobileNo: this.form.userMobile,
          imageCode: this.form.imageCode,
          pageFlg: 1
        }
      }).then(res => {
        this.$message.success(res.data.content)
        this.disabled = true
        let num = 60
        let setinit = setInterval(() => {
          num--
          this.codeText = `${num}秒后重新获取`
          if (num === 0) {
            this.codeText = '发送验证码'
            this.disabled = false
            clearInterval(setinit)
          }
        }, 1000)
      }).catch(err => {
        console.log(err)
        this.$message.warning(err.data.message)
      })
    },
    sub () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$tkAjax.post(`${this.$config.baseUrl}/user/merchantUser/register`, {
            userName: this.form.userName,
            userPassword: this.$md5(this.form.userPassword),
            // userPassword: this.form.userPassword,
            userMobile: this.form.userMobile
          }, {
            params: {
              mobileCode: this.form.mobileCode
            },
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            console.log(res)
            this.$store.commit('setTel', res.data.content.userTel)
            this.$message.success(res.data.message)
            this.$router.push('/login')
          }).catch(err => {
            this.$message.warning(err.data.message)
            this.init()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scope>
.wrap {
  .title {
    padding: 67px 100px;
    font-family: 'PingFang-SC';
    font-size: 37px;
    color: #4B4B4B;
    line-height: 56px;
  }
  .register {
    width: 100%;
    height: 616px;
    background-image: url('../../../assets/images/wave.png');
    background-size: 100% 100%;
    .card {
      width: 499px;
      background: #f5f5f5;
      float: right;
      border-radius: 6px;
      margin: 75px 67px;
      .log {
        padding: 0;
        font-size: 28px;
        text-align: center;
        line-height: 44px;
        margin: 13px 0 20px 0;
        font-weight: 546;
      }
      .form {
        text-align: center;
        .four {
          .el-form-item__content {
            .el-form-item__error {
              left: 49px;
            }
            .el-input {
              width: 400px;
              .el-input__inner {
                background-color: #eef9fb;
              }
            }
          }
        }
        .ymas {
          padding: 0 18px;
          display: flex;
          justify-content: space-around;
          .el-form-item__content {
            .el-input {
              width: 230px;
              .el-input__inner {
                background-color: #eef9fb;
              }
            }
          }
        }
        .mocode {
          display: flex;
          justify-content: space-around;
          .el-form-item__content {
            .el-input {
              .el-input__inner {
                background-color: #eef9fb;
              }
            }
          }
        }
        .btns {
          padding: 10px 0 23px;
        }
        .bigbtn {
          .el-button {
            width: 400px;
            height: 44px;
            font-size: 20px;
            background-color: #74acdf;
          }
        }
        .nius {
          padding: 10px 0;
          display: flex;
          justify-content: space-around;
          .el-button {
            color: #82858B;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
